/*
*/
<template>
	<view class="trafficDetails">
		<c-navigation-bar left-icon-border="#fff" titleColor='#fff' :navType='navObj.navType' :navThmen='navObj.navThmen'
			navbarBgColor="transparent" :title="$t('storeManagement.trafficDetails')"></c-navigation-bar>
		<view class="container-box">
			<view class="shop-msg">
				<view class="store-card" @click="goShopInfo">
					<view class="">
						<view class="" style="display: flex;align-items: center;margin-bottom: 40rpx;">
							<image style="width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 10rpx"
								:src="$u.file.getMedieUrl(storeInfo.shopAvatarUrl)" mode="aspectFill"></image>
							<view class="" style=";">
								<view class="" style="display: flex;">
									<view style="
										color: #fff;
										height: 20px;
										font-size: 14px;
										font-weight: bold;
										display: inline-block;
										width: 220rpx;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: normal;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 1;
									">
										{{ storeInfo.shopName }}

									</view>

									<view class="shopRate">
										<view class="shopRateName">
											{{ storeInfo.shopLevel || "VIP1"}}
										</view>

									</view>

								</view>

								<view style="color: #ccc;font-size: 12px;min-width: 240rpx">
									{{`${$t('product.shopFans')} ${ storeInfo.interestNum || 0} | ${$t('product.shopSalesVolume')} ${ storeInfo.shopSalesVolume || 0}` }}
								</view>

							</view>
						</view>

						<view class="" style="color: #fff;">
							<u-icon name="moments" color="#fff" size="32" style="margin:0 10rpx"></u-icon>
							{{$t('storeManagement.currentRemaining')}}：
							<text style="font-size: 24px;margin: 0 10rpx;">{{ surplus }}</text>MB
						</view>
					</view>

					<view class="">
						<image src="@/static/images/storeIntroduct/image_24.png" mode="" style="width: 160rpx;height: 160rpx;"
							width="160rpx"></image>
					</view>

				</view>

			</view>
			<view class="boxs">
				<view class="title">
					{{$t('storeManagement.trafficDetails')}}
				</view>
				<view class="box-border" v-for="(i,k) in trafficDetailsList" :key="k">
					<view class="jc1">
						<view class="">
							{{i.useType}}
						</view>
						<view class="">
							{{i.dealType==1?'+':'-'}}	{{i.volume}}{{i.unit==1?MB:$t('media.number')}}
						</view>
					</view>
					<view class="jc2">
						<view class="">
							{{publicJS.timeZoneSwitching(i.createTime)}}
						</view>
						<view class="">
						{{$t('storeManagement.Remaining')}}：{{i.surplus}}{{i.unit==1?MB:$t('media.number')}}
						</view>
					</view>
				</view>
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				//nav
				navObj: {
					navThmen: 'line',
					navType: 'navBackTitle',
					backIconColor: "#fff"
				},
				storeInfo: {},
				surplus: '',
				trafficDetailsList: [],
			}
		},
		onLoad() {
			this.$u.get('/app/shop/get/' + uni.getStorageSync('vuexShopId')).then(res => {
				this.storeInfo = res.data
			})
			this.$u.get(`/app/shop/storeTrafficSurplus/${uni.getStorageSync('vuexShopId')}`).then((res) => {

				this.surplus = res.data.residue
			});
			this.$u.post(`/app/shopDataDetail/getAll`, {
				shopId: uni.getStorageSync('vuexShopId'),
				"pageNum": 1,
				"pageSize": 999
			}).then((res) => {

				this.trafficDetailsList = res.data.records
			});

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	/deep/ uni-page-wrapper {
		background-color: #1b1d29;
	}

	/deep/ .left-icon-block {
		background: #fff;
	}

	.trafficDetails {
		background: rgba(27, 29, 41, 1);
		height: 100vh;
	}

	.container-box {
		padding-bottom: 120rpx;
		padding: 0;
	}

	.shop-msg {
		margin: 0 10rpx;

		.store-card {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 129px;
			padding: 40rpx 32rpx;
			border-radius: 26rpx 26rpx 0 0;
			background: #303349;
			margin: 0 40rpx;

			view {
				text {
					font-size: 28rpx;
					color: #fff;
				}
			}
		}

		.shopRate {
			display: flex;
			align-items: center;
			margin: 10rpx 0;

			.shopRateName {
				color: rgba(95, 100, 140, 1);
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 18rpx;
				width: 80rpx;
				height: 38rpx;
				border-radius: 4rpx;
				border: 1rpx solid rgba(189, 188, 199, 1);
				box-sizing: border-box;
				background: rgba(252, 250, 254, 1);
				line-height: 34rpx;
				text-align: center;
			}


		}


	}

	.title {
		color: #000;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		margin-bottom: 24rpx;
	}

	.boxs {
		background: #fff;
		height: 77vh;
		border-radius: 26rpx 26rpx 0 0;
		padding: 40rpx;
		overflow: auto;
	}

	.box-border {
		padding: 52rpx 40rpx;
		border-bottom: 1px solid #ccc;
		height: 200rpx;

		.jc1 {
			display: flex;
			justify-content: space-between;
			color: rgba(27, 29, 41, 1);
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 14px;
		}

		.jc2 {
			display: flex;
			justify-content: space-between;
			  color: rgba(182, 182, 182, 1);
			  font-family: PingFang SC;
			  font-size: 13px;
				margin-top: 20rpx;
		}

		.row {
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;

			.rowTitle {
				color: rgba(23, 23, 23, 1);
				font-family: PingFang SC;
				font-weight: 500;
				margin-right: 8rpx;
				font-size: 28rpx;
				width: 150rpx;
			}

			.progress {
				width: 160rpx;
				height: 24rpx;
				border-radius: 32rpx;
				margin: 0 16rpx;
				background: rgba(230, 230, 230, 1);

				.progress-bar {
					height: 24rpx;
					border-radius: 32rpx;
					background: linear-gradient(90deg, rgba(198, 233, 77, 1) 0%, rgba(239, 218, 73, 1) 26.22%, rgba(240, 156, 58, 1) 57.06%, rgba(240, 156, 58, 1) 98.71%, rgba(235, 115, 48, 1) 98.71%);
				}
			}

			.rowRange {
				font-weight: 500;
				font-size: 28rpx;
				margin-right: 8rpx;
				color: rgba(253, 161, 22, 1);
			}

			.rowMes {
				color: rgba(253, 161, 22, 1);
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
			}
		}

		.range {
			color: rgba(95, 100, 140, 1);
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 48rpx;
		}

		.tips {
			color: rgba(182, 182, 182, 1);
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 10px;
			padding: 0 0 40rpx;
			margin: 20rpx 0 40rpx;
			border-bottom: 1px solid rgba(182, 182, 182, 1);
		}

	}
</style>